<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__STATIC__/common/phone/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/common/phone/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="__STATIC__/common/phone/css/mui.picker.min.css" />
    <link rel="stylesheet" href="__STATIC__/common/phone/css/select2.min.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/common/phone/css/style.css" />
    <!--引入图标样式-->
    <link rel="stylesheet" href="__STATIC__/admin/assets/font-awesome/css/font-awesome.min.css">
</head>
<style>
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 1px;
        height: 10px;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        /*  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
        background-color: #f2f4f8;
        width: 0px;
    }

    ::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
        background-color: rgba(50, 50, 50, 0.05);
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: rgba(50, 50, 50, 0.25);
        border: 2px solid transparent;
        border-radius: 10px;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #999;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #fff;

    }
    select{
        height: 30px;
        padding: 0;
        padding-left: 15px;
        box-shadow: none;
        border: 1px solid #ccc !important;
    }
    .add{
        padding: 10px;
    }
    .add_order_content{
        height: 100%;
        padding-bottom: 50px;
    }
    .bottom_btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        margin-left: -10px;
        padding: 10px;
    }
    .btn_definite{
        background: none;
    }
    .btn_definite button{
        background-color: #25b3f6;
        border-radius: 3px;
    }
    .btn_close button{
        border: 1px solid #25b3f6;
    }
    .w50{
        float: left;
        width: 50%;
    }
    .w33{
        float: left;
        width: 33%;
    }
</style>
<body>
<!--新增订单-->
<div  class="add" id="add_neworder">
    <div class="add_order_content">
        <form id="res_form">
            <input type="hidden" name="state" value="1">
            <div class="form-group form_group_item">
                <label>姓名</label>
                <input type="text" name="name_z" class="form-control">
            </div>
            <div class="form-group form_group_item">
                <label>手机号码</label>
                <input type="text" name="phone_z" class="form-control">
            </div>
            <div class="form-group form_group_item">
                <label>微信号码</label>
                <input type="text" name="wechat" class="form-control">
            </div>
            <div class="form-group form_group_item" style="height: 50px;">
                <label style="float: left;width: 100%">渠道来源</label>
                <select class="w33" name="channel" id="channel">
                    {volist name='channel' id='data' }
                    <option value="{$data.id}">{$data.title}</option>
                    {/volist}
                </select>
                <select class="w33" name="source" id="source" style="margin-left: -1px;">
                </select>
                <select class="w33" name="banji" id="banji" style="margin-left: -1px;">
                </select>
            </div>
            <div class="form-group form_group_item" id="xingqiji" style="height: 50px;display: none">
                <label style="float: left;width: 100%">星期</label>
                <select  name="xingqi" id="xingqi" style="margin-left: -1px;">
                    {volist name='xingqi' id='vo'}
                    <option value="{$vo}" {if condition="$data['xingqi']== $vo"} selected="selected" {else}{/if}>{$vo}</option>
                    {/volist}
                </select>
            </div>
            <div class="form-group form_group_item" id="shangkeriqi" style="display: none">
                <label style="float: left;width: 100%">上课时间与上课时间段</label>
                <div class="w50">
                    <input type="text" name="shijianduan1" class="shijianduan1" id="shijianduan1" class="form-control">
                </div>
                <div class="w50">
                    <input type="text" name="shijianduan2" class="shijianduan2" id="shijianduan2" class="form-control">
                </div>
            </div>
            <!--<div class="form-group form_group_item">-->
                <!--<label>类型</label>-->
                <!--<select name="leibie">-->
                    <!--{volist name='leibie' id='info'}-->
                    <!--<option value="{$info.id}">{$info.title}</option>-->
                    <!--{/volist}-->
                <!--</select>-->
            <!--</div>-->
            <div class="form-group form_group_item">
                <label>拍摄方式</label>
                <select name="shotmode" class="shotmode">
                    {volist name='shotmode' id='info'}
                    <option value="{$info.id}">{$info.title}</option>
                    {/volist}
                </select>
            </div>
            <div class="form-group form_group_item">
                <label>活动</label>
                <select name="activity">
                    <option value="">未选择</option>
                    {volist name='activity' id='info' }
                    <option value="{$info.id}">{$info.title}</option>
                    {/volist}
                </select>
            </div>
            <div class="form-group form_group_item">
                <label>意向度</label>
                <select name="intention">
                    <option value="">未选择</option>
                    {volist name='yixiang' id='info'}
                    <option value="{$info.id}">{$info.title}</option>
                    {/volist}
                </select>
            </div>
            <div class="form-group form_group_item">
                <label>预算</label>
                <select name="budget">
                    <option value="">未选择</option>
                    {volist name='yusuan' id='info'}
                    <option value="{$info.id}">{$info.title}</option>
                    {/volist}
                </select>
            </div>
            <!--<div class="form-group form_group_item">-->
                <!--<label>意向拍摄次数</label>-->
                <!--<select name="intention_num">-->
                    <!--<option value="">未选择</option>-->
                    <!--{volist name='int_num' id='info'}-->
                    <!--<option value="{$info.id}">{$info.title}</option>-->
                    <!--{/volist}-->
                <!--</select>-->
            <!--</div>-->
            <div class="form-group form_group_item">
                <label>预计拍摄时间</label>
                <input type="text" name="shot_time" class="shot_time" id="shot_time" class="form-control">
            </div>
            <div class="form-group form_group_item"  style="height: 50px;">
                <label style="float: left;width: 100%">邀约人员</label>
                <select class="w50" name="yykf_group" id="group">
                    <option value="0">选择邀约组</option>
                    {volist name="sondepar" id="info"}
                    <option  value="{$info.id}" {eq name="depar" value="$info.id" }selected{/eq} >{$info.name}</option>
                    {/volist}
                </select>
                <select class="w50" name="yykf" id="invit">
                    <option value="0">选择邀约人员</option>
                </select>
            </div>
            <div class="form-group form_group_item">
                <label>备注</label>
                <textarea name="qdbz" rows="" cols=""></textarea>
            </div>
        </form>
    </div>
    <div class="bottom_btn">
        <div class="btn_definite">
            <button type="button" onclick="save()">保存订单</button>
        </div>
        <div class="btn_close">
            <button type="button" id="cancel_btn">取消</button>
        </div>
    </div>
</div>
<!--新增订单-->
</body>
<script type="text/javascript" src="__STATIC__/common/phone/js/jquery-3.2.0.min.js" ></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/bootstrap.min.js" ></script>
<!--引入MUi插件-->
<script type="text/javascript" src="__STATIC__/common/phone/js/mui.min.js" ></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/mui.picker.min.js" ></script>
<!--引入layer插件-->
<script type="text/javascript" src="__STATIC__/common/layer/layer.js"></script>
{include file='base/validate'}
<script>
    /*数据校验*/
    var fields ={
        name_z: {
            message: '用户名验证失败',
            validators: {
                notEmpty: {
                    message: '主要联系人不能为空'
                }
            }
        },
        phone_z: {
            message: 'The phone is not valid',
            validators: {
                regexp: {
                    regexp: /^1[3|5|8|7]{1}[0-9]{9}$/,
                    message: '请输入正确的手机号码'
                },
//                threshold :  10 ,
//                remote: {
//                    type: "post",
//                    url: '{:url(\'getContact\')}',
//                    message: '当前号码已经存在',
//                    delay: 1000,
//                    data: function(validator) {
//                        return {
//                            name: $('[name="phone_z"]').attr('name'),
//                            value: $('[name="phone_z"]').val()
//                        };
//                    }
//                }

            }
        },
        wechat: {
            message: 'The phone is not valid',
            validators: {
//                threshold :  6 ,
//                remote: {
//                    type: "post",
//                    url: '{:url(\'getContact\')}',
//                    message: '当前号码已经存在',
//                    delay: 500,
//                    data: function(validator) {
//                        return {
//                            name: $('[name="wechat"]').attr('name'),
//                            value: $('[name="wechat"]').val()
//                        };
//                    }
//                }

            }
        }
    }
    //页面初始化
    $(function () {
        $('#channel').find('option').eq(0).trigger("change");
        $('.shotmode').find('option').eq(0).attr('selected','selected');
        var id = "{$depar}";
        var obj = 'invit';
        var user = "{$user_id}";
        getuser(id,obj,user);
//        var diction= "{$diction}";
//        if(diction != 1){
//            getuser(id,obj,user);
//        }

        //时间插件
        $('.shot_time').click(function(){
            var dtPicker = new mui.DtPicker({
                "type": "datetime"
            });
            dtPicker.show(function (selectItems) {
                $('.shot_time').val(selectItems)
            })
        })
        $('.shijianduan1').click(function () {
            var dtPicker = new mui.DtPicker({
                "type": "time"
            });
            dtPicker.show(function (selectItems) {
                $('.shijianduan1').val(selectItems)
            })
        })
        $('.shijianduan2').click(function () {
            var dtPicker = new mui.DtPicker({
                "type": "time"
            });
            dtPicker.show(function (selectItems) {
                $('.shijianduan2').val(selectItems)
            })
        })
    });
    //更改渠道事件
    $('#channel').change(function () {

        var channel = $('#channel').val();
        var obj = $('#source');
        getsource(channel,obj);
    });
    /*根据渠道获取来源*/
    function getsource(data,obj) {
        if(data != '') {
            $.post("{:url('common/getSourceByChennel')}", {channel: data}, function (result) {
                var html = "";
                obj.html('');
                if (result == '') {
                    html += "<option value='0' disabled>暂无来源</option>";
                    obj.append(html);
                } else {
                    for (var i = 0; i < result.length; i++) {
                        html += "<option value=" + result[i].id + ">" + result[i].title + "</option>"
                    }
                    obj.append(html);
                }
            });
            var banji = $('#banji');
            $.post("{:url('common/getBanjiBySource')}", {source: data}, function (result) {
                var html = "";
                banji.html('');

                if (result == '') {
                    // $('#banjishow').hide();
                    $('#xingqiji').hide();
                    $('#shangkeriqi').hide();
                    html += "<option value='0' disabled>暂无班级</option>";
                    banji.append(html);
                }else if(result.code==0){
                    return false;
                } else {
                    // $('#banjishow').show();
                    $('#xingqiji').show();
                    $('#shangkeriqi').show();
                    $.each(eval(result), function (i, n) {
                        $("<option value='" + n.id + "' selected='selected'>" + n.banjiname + "</optinon>").appendTo(banji);
                    });
                }
            })
        }
    }
    //关闭弹窗
    $('#cancel_btn').click(function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    });
    //推荐客资校验
    $('#res_form').bootstrapValidator({
        message: '',
        fields: fields
    });
    /*保存客资*/
    function save() {
        var formData = new FormData($("#res_form")[0]);
        var bootstrapValidator = $("#res_form").data('bootstrapValidator');
        bootstrapValidator.validate();
        if (bootstrapValidator.isValid()) {
            if(!$("[name='phone_z']").val() && !$("[name='wechat']").val()){
                $("[name='phone_z']").parent().parent('.tab').addClass('has-error');
                $("[name='wechat']").parent().parent('.tab').addClass('has-error');
                return layer.msg("联系人电话或微信必填其一", {icon: 0});
            }else {
                $("[name='phone_z']").parent().parent('.tab').removeClass('has-error');
                $("[name='wechat']").parent().parent('.tab').removeClass('has-error');
            }
            $.ajax({
                type: "POST",
                url:  "{:url('add')}",
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend:function(){
                    $(this).attr("disabled","false"); //禁止点击
                },
                success: function(data){
                    layer.msg(data.info, {icon: data.status});
                    setTimeout(function(){
                        $(this).attr("disabled","false"); //禁止点击
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        window.parent.location.reload();
                    },2000); //延迟演示

                }
            });
            return false;
        } else return;
    }
    $(".btn-primary").on("click", function () {

    });
    //选择邀约组
    $('#group').change(function () {
        var id = $(this).val();
        var obj = "invit";
        getuser(id,obj);
    });

    /*获取对应的邀约组员*/
    function getuser(id,obj,user) {
        $.post("{:url('common/getuserByGroup')}",{depart_id:id},function(result){
            var html = '';
            $('#'+obj).html('');
            if(id == '0'){
                html += "<option value='0'>选择邀约人员</option>";
            }else {
                if(result.length ==0){
                    html += "<option  disabled>暂无邀约人员</option>";
                }else {
                    for (var i in result) {
                        if(user == result[i].id){
                            html += "<option value="+result[i].id+" selected >"+result[i].username+"</option>"
                        }else {
                            html += "<option value="+result[i].id+">"+result[i].username+"</option>"
                        }

                    }
                }

            }
            $('#'+obj).append(html);
        });
    }
</script>
</html>